<template>
    <div class="mall-goods-add">
        <m-example title="商品添加">
            <Steps :current="activeIndex ? activeIndex : 0" slot="header-left">
                <Step title="商品分类" content="这里是该步骤的描述信息"></Step>
                <Step title="商品详情" content="这里是该步骤的描述信息"></Step>
                <Step title="商品属性" content="这里是该步骤的描述信息"></Step>
                <Step title="完成" content="这里是该步骤的描述信息"></Step>
            </Steps>
            <ButtonGroup slot="header-right">
                <Button type="primary" @click.native="preStep" v-if="activeIndex">
                    <Icon type="chevron-left"></Icon>
                    <span>上一步</span>
                </Button>
                <Button type="primary" @click.native="save();nextStep()" v-if="activeIndex !== 3">
                    <span>下一步</span>
                    <Icon type="chevron-right"></Icon>
                </Button>
            </ButtonGroup>
            <div class="goods-add-view">
                <div class="view-filed">
                    <add-category v-if="this.$route.query.step === 'category'" @change="onCategory"></add-category>
                    <add-base v-if="this.$route.query.step === 'base'" @change="onBase"></add-base>
                    <add-attribute v-if="this.$route.query.step === 'attribute'" @change="onAttribute"></add-attribute>
                    <add-publish v-if="this.$route.query.step === 'publish'"></add-publish>
                </div>
                <div class="view-tip">
                    <m-divider title="温馨提示"></m-divider>
                </div>
            </div>
        </m-example>
    </div>
</template>

<script>
    import category from './add/category'
    import base from './add/base'
    import attribute from './add/attribute'
    import publish from './add/publish'

    export default {
        data() {
            return {
                step: ['category', 'base', 'attribute', 'publish'],
                category: [],
                base: '',
                attribute: ''
            }
        },
        computed: {
            activeIndex() {
                return this.step.indexOf(this.$route.query.step);
            }
        },
        components: {
            addCategory: category,
            addBase: base,
            addAttribute: attribute,
            addPublish: publish
        },
        methods: {
            nextStep() {
                this.goto('/mall/goods/add?step=' + this.step[this.activeIndex + 1])
            },
            preStep() {
                this.goto('/mall/goods/add?step=' + this.step[this.activeIndex - 1])
            },
            onCategory(val) {
                this.category = val;
            },
            onBase(val) {
                this.base = val;
            },
            onAttribute(val) {
                this.attribute = val;
            },
            save() {
                this.$route.query.step === 'category' && this.saveCategory();
                this.$route.query.step === 'base' && this.saveBase();
                this.$route.query.step === 'attribute' && this.saveAttribute();
            },
            saveCategory() {
                this.$store.dispatch('addGoodsCategory', this.category[1]);
            },
            saveBase() {
                this.$store.dispatch('addGoodsBase', this.base);
            },
            saveAttribute() {
                this.$store.dispatch('addGoodsAttribute', this.attribute);
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../../assets/less/Var.less';

    .mall-goods-add {
        .goods-add-view {
            display: flex;
            .view-filed {
                flex: 1;
                padding-right: 15px;
            }
            .view-tip {
                flex-basis: 40%;
                box-sizing: border-box;
                padding-left: 15px;
                border-left: 1px dashed @divider-color;
            }
        }
    }
</style>